<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const O = { x: 230, y: 90 };
        const l = 150; // length/radius
        const m_radius = 8; // mass radius
        const theta_deg = 30;
        const theta_rad = theta_deg * Math.PI / 180;

        // Point coordinates
        const A = { x: O.x + l, y: O.y };
        const C = { x: O.x, y: O.y + l };
        const B = { x: O.x + l * Math.cos(theta_rad), y: O.y + l * Math.sin(theta_rad) };
        const D_angle_from_horizontal = (90 + theta_deg) * Math.PI / 180;
        const D = { x: O.x + l * Math.cos(D_angle_from_horizontal), y: O.y + l * Math.sin(D_angle_from_horizontal) };

        // --- Drawing ---

        // 1. Arc ACD (solid, thick)
        ctx.beginPath();
        ctx.arc(O.x, O.y, l, 0, D_angle_from_horizontal, false);
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        // 2. Line OA (solid, thin)
        ctx.beginPath();
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(A.x, A.y);
        ctx.lineWidth = 1;
        ctx.stroke();

        // 3. Mass at A
        ctx.beginPath();
        ctx.arc(A.x, A.y, m_radius, 0, 2 * Math.PI);
        ctx.fillStyle = '#606060';
        ctx.fill();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.stroke();

        // 4. Dashed lines (OB, OC, OD)
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        // OB
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(B.x, B.y);
        // OC
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(C.x, C.y);
        // OD
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(D.x, D.y);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 5. Angle arcs (thin, solid)
        ctx.beginPath();
        ctx.lineWidth = 1;
        // Angle for B (between OA and OB)
        ctx.arc(O.x, O.y, 40, 0, theta_rad, false);
        ctx.stroke();

        ctx.beginPath();
        // Angle for D (between OC and OD)
        ctx.arc(O.x, O.y, 40, 90 * Math.PI / 180, D_angle_from_horizontal, false);
        ctx.stroke();

        // 6. Labels
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Labels O, A, B, C, D
        ctx.font = "22px 'Times New Roman'";
        ctx.fillText('O', O.x - 20, O.y);
        ctx.fillText('A', A.x + 20, A.y + 5);
        ctx.fillText('B', B.x + 18, B.y + 5);
        ctx.fillText('C', C.x, C.y + 20);
        ctx.fillText('D', D.x - 20, D.y + 5);

        // Labels m, l, θ (with italic font)
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('m', A.x - 25, A.y + 2);
        ctx.fillText('l', O.x + l / 2, O.y - 15);
        
        // Position for θ near B
        const theta1_label_angle = theta_rad / 2;
        const theta1_label_radius = 55;
        ctx.fillText('θ', O.x + theta1_label_radius * Math.cos(theta1_label_angle), O.y + theta1_label_radius * Math.sin(theta1_label_angle) + 5);

        // Position for θ near D
        const theta2_label_angle = (90 * Math.PI / 180 + D_angle_from_horizontal) / 2;
        const theta2_label_radius = 25;
        ctx.fillText('θ', O.x + theta2_label_radius * Math.cos(theta2_label_angle), O.y + theta2_label_radius * Math.sin(theta2_label_angle) + 15);

        // 7. Chinese Text
        ctx.font = "24px 'SimSun', 'Microsoft YaHei', sans-serif";
        ctx.textAlign = 'center';
        ctx.fillText('习题 2-18 图', canvas.width / 2, C.y + 80);

    </script>
</body>
</html>